import Vue from 'vue'
import VueRouter from 'vue-router'
// @表示项目的根目录, 从@/views/CarListView这个组件文件中导入vue实例对象,并命名为CarListView
import CarListView from "@/views/CarListView";
import CarRentView from "@/views/CarRentView";
import AccountView from "@/views/account/AccountView";
import LoginView from "@/views/account/LoginView";
import RegisterView from "@/views/account/RegisterView";

Vue.use(VueRouter)

// routes是用于注册路由地址表的数组
// 为什么是数组? 会有很多组件需要注册路由
// 数组中的元素是 { 属性1path:'指定路由地址', 属性2component: 指定vue实例对象}
const routes = [
  { path:'/car/list', component: CarListView },
  { path:'/car/rent', component: CarRentView },
  // 第一级的路由, vue组件挂载点是App.vue中的<router-view/>
  {
    path:'/account',
    component: AccountView,
    // 路由可以有子路由, 在路由对象中使用children来写子路由数组
    // 子路由会在父路由对应的vue组件对象中寻找路由挂载点
    children: [
      // 这两个路由是属于'/account'的子路由, 他们不会挂载在App.vue上, 而是会挂载在AccountView.vue上
      // AccountView.vue中必须提供子路由挂载点
      { path:'/account/login', component: LoginView },
      { path:'/account/register', component: RegisterView }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
